<template>
    <div class="table">
      <div class="container">
            <div class="handle-box">
                <el-button type="primary" size="mini" @click="deleteAllsong()" >批量删除</el-button>
                <el-input
                  placeholder="请输入查询内容"
                  v-model=name
                  maxlength="5"
                  style="width: 160px"
                  size="small"
                  clearable

                  >
                </el-input>
                <el-button type="primary" size="mini" @click="centerDialogVisible = true">添加歌曲</el-button>
            </div>
        </div>
        <!-- 000000000 -->
        <el-table :data="tableData" 
        size="mini" 
        border 
        style="width:100%" 
        height="500px"
        @selection-change="selectChanges">
            <el-table-column
                type="selection"
                width="40px">
            </el-table-column>
            <el-table-column label="序号" width="40px">
            <template slot-scope="scope">
              {{scope.$index+1}} 
            </template>
            </el-table-column>
            <el-table-column prop="pic" label="歌手图片" width="110" align="center">
                <template >
                    <div class="singer-img">
                        <img style="width:100%"/>
                    </div>
                    <!-- <el-upload>
                        <el-button size="mini">更新图片</el-button>
                    </el-upload> -->
                </template>
            </el-table-column>
            <el-table-column prop="name" label="歌名" width="120" align="center"></el-table-column>
            <el-table-column prop="introduction" label="专辑" width="120" align="center">
                <template>
                   
                </template>
            </el-table-column>
            <el-table-column label="歌词"  align="center">
                <template slot-scope="scope">
                    <p style="height:100px;overflow:scroll">{{scope.row.lyric}}</p>
                </template>
            </el-table-column>
            <el-table-column label="资源更新" width="120px" align="center">
                    <div align= "center">
                        <el-button size="mini" >更换图片</el-button>
                    </div>
                    <div class="box" align= "center">
                        <el-button size="mini" >更新歌曲</el-button>
                    </div>      
            </el-table-column>
            <el-table-column label="评论" width="120" align="center">
                   <div align= "center">
                        <el-button size="small" >评论</el-button>
                    </div>
            </el-table-column>
            <el-table-column  
                    label="操作"
                    width="150px"
                    align="center">
            <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="updateword(scope.row.id)"></el-button>
            <el-button type="primary" icon="el-icon-delete" @click="deleteone(scope.row.id)"></el-button>
            </template>
            </el-table-column>
        </el-table>
         <el-dialog title="修改歌曲信息" :visible.sync="centerDialogVisible" width="400px" center>
            <el-form :model="song" ref="song" label-width="80px">
                <el-form-item prop="name" label="歌名" size="mini">
                    <el-input v-model="song.name" placeholder="歌手名"></el-input>
                </el-form-item>
                <el-form-item prop="introduction" label="专辑" size="mini">
                    <el-input v-model="song.introduction" placeholder="歌手名"></el-input>
                </el-form-item>
                <el-form-item prop="lyric" label="歌词" size="mini">
                    <el-input v-model="song.lyric" placeholder="简介" type="textarea"></el-input>
                </el-form-item>                
            </el-form>
            <span slot="footer">
                <el-button size="mini" @click="centerDialogVisible = false">取消</el-button>
                <el-button size="mini" @click="updatewordtwo()">确定</el-button>
                
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mixin } from '../mixins/index';
import {selectBySingerId} from "../api/index";
import {deleteBySongId} from "../api/index";
import {selectSongBySongId} from "../api/index";
import {updateBySongId} from "../api/index";
import {deleteAllsong} from "../api/index";
import {selectName} from '../api/index';
export default {
    mixins: [mixin],
    data(){
        return{
            tableData:[],
            songData:[],
            // 定义表单要绑定的数据
            // registerForm: {
            // },
            id:0,
            name:'',
            song:{
                name:'',
                introduction:'',
                lyric:'',
            },
            centerDialogVisible: false,
            selected:[],
            gettime:'',
        
        }
    },

    created(){
        this.id = localStorage.getItem('singerId');
        this.getData();
       //调用getData方法，实现初始化歌手信息的数据
    },

    watch: {
    // 检测查询变化
    name: {
      handler() {
        //参数变化时需要执行的代码
        this.selectName()
        },
    }
  
     },
    methods:{
        //查询所有歌手信息
        getData(){
            //需要调用 api/index.js中的方法向后台发送ajax请求
        let params = new URLSearchParams();
        params.append('singerId',this.id);
        selectBySingerId(params)
        .then(res => {
              console.log(res.songlist)
              this.tableData =res.songlist;
            })
            .catch(err => {
                console.log(err);
            });
        },
        //更新图片
        uploadUrl() {
            //需要调用 api/index.js中的方法向后台发送ajax请求
        },

        //修改歌曲信息,先根据id查询歌曲信息
        updateword(id){
            let params = new URLSearchParams();
            params.append('id',id);
            selectSongBySongId(params)
            .then(res => {
            this.song =res.song;
            this.getCurrentTime();
            this.centerDialogVisible=true;
            })
            .catch(err => {
                console.log(err);
            });
        },


        getCurrentTime() {
        //获取当前时间并打印
            var _this = this;
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth()+1;
            let dd = new Date().getDate();
            let hh = new Date().getHours();
            let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
            let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
            _this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
            console.log(_this.gettime)  
            },


        updatewordtwo(){
            let params = new URLSearchParams();
            params.append('id',this.song.id);
            params.append('name',this.song.name);
            params.append('introduction',this.song.introduction);
            params.append('updateTime',this.gettime);
            params.append('lyric',this.song.lyric);
            updateBySongId(params)
             .then(res => {
              if(res.code == 1){
                    this.notify("修改成功","success");
                     this.centerDialogVisible=false;
                    this.getData();
                }else{
                    this.notify("修改失败","error");
                }
           
            })
            .catch(err => {
                console.log(err);
            });
        },
        //删除歌曲
        deleteone(id){
        let params = new URLSearchParams();
        params.append('id',id);
        deleteBySongId(params)
         .then(res => {
              if(res.code == 1){
                    this.notify("删除成功","success");
                    this.getData();
                }else{
                    this.notify("删除失败","error");
                }
            })
            .catch(err => {
                console.log(err);
            });
        },
        selectChanges(val){
            this.selected = val
            console.log(this.selected)
        },
        //批量删除
        deleteAllsong(){
            let params = new URLSearchParams();
            let ids = [];
            for(let i = 0 ; i <this.selected.length;i++){
                ids.push(this.selected[i].id)
            }
            if(ids.length == 0){
                 this.notify("请选择要删除的歌手","error");
                 return;
            }
            params.append('songIds',ids);
            deleteAllsong(params)
            .then(res => {
              if(res.code == 1){
                    this.notify("删除成功","success");
                    this.getData();
                }else{
                    this.notify("删除失败","error");
                }
            })
            .catch(err => {
                console.log(err);
            });
        },
//模糊查询
        selectName(){
            let params = new URLSearchParams();
            params.append('name',this.name);
            selectName(params)
             .then(res => {
            //   console.log(res.songlist)
            alert('00000')
              this.tableData =res.song;
            })
            .catch(err => {
                console.log(err);
            });
        },



        // selectByName(input){
        // //根据歌曲名字模糊查询
        // let params = new URLSearchParams();
        // params.append('name',input);
        // selectName(params)
        //  .then(res => {
        //      alert('0000')
        //       this.tableData=res.songlist
        //     })
        //     .catch(err => {
        //         console.log(err);
        //     });

        // },




    }
}
</script>

<style scoped>
    .handle-box{
        margin-bottom: 20px;
    }
    .singer-img{
        width: 100%;
        height: 80px;
        border-radius: 5px;
        margin-bottom: 5px;
        overflow: hidden;
    }
    .box{
        margin-top: 20px;
    }
</style>